package com.luhuiguo.cms.client.ui;

import com.extjs.gxt.ui.client.Style.HorizontalAlignment;
import com.extjs.gxt.ui.client.binding.FormBinding;
import com.extjs.gxt.ui.client.core.El;
import com.extjs.gxt.ui.client.core.XDOM;
import com.extjs.gxt.ui.client.event.ComponentEvent;
import com.extjs.gxt.ui.client.event.Events;
import com.extjs.gxt.ui.client.event.Listener;
import com.extjs.gxt.ui.client.widget.Component;
import com.extjs.gxt.ui.client.widget.ComponentPlugin;
import com.extjs.gxt.ui.client.widget.ContentPanel;
import com.extjs.gxt.ui.client.widget.button.Button;
import com.extjs.gxt.ui.client.widget.form.FormButtonBinding;
import com.extjs.gxt.ui.client.widget.form.FormPanel;
import com.extjs.gxt.ui.client.widget.form.NumberField;
import com.extjs.gxt.ui.client.widget.form.TextArea;
import com.extjs.gxt.ui.client.widget.form.TextField;
import com.extjs.gxt.ui.client.widget.layout.FitLayout;
import com.extjs.gxt.ui.client.widget.layout.FormData;
import com.google.gwt.user.client.ui.Widget;
import com.google.inject.Inject;
import com.google.inject.Singleton;
import com.luhuiguo.cms.client.GlobalConstants;
import com.luhuiguo.cms.client.GlobalMessages;
import com.luhuiguo.cms.client.presenter.EditChannelPresenter;

@Singleton
public class EditChannelView extends ContentPanel implements EditChannelPresenter.Display {

    private GlobalConstants constants;

    private GlobalMessages messages;

    private FormPanel formPanel;

    private FormBinding formBinding;

    private NumberField idField;

    private TextField<String> nameField;

    private TextField<String> titleField;

    private TextField<String> urlField;
    
    private TextField<String> keywordsField;
    
    private TextArea descriptionField;

    private NumberField rankField;

    private Button submitButton;

    private Button cancelButton;

    @Inject
    public EditChannelView(GlobalConstants constants, GlobalMessages messages) {

        this.constants = constants;
        this.messages = messages;
        init();
    }

    protected void init() {

        formPanel = new FormPanel();
        formPanel.setHeading(messages.editChannel());
        formPanel.setFrame(true);
        formPanel.setLabelWidth(60);
        //formPanel.setWidth(500);
        //formPanel.setStyleAttribute("margin", "10px");

        FormData formData = new FormData("100%");

        ComponentPlugin plugin = new ComponentPlugin() {
            public void init(Component component) {
                component.addListener(Events.Render, new Listener<ComponentEvent>() {
                    public void handleEvent(ComponentEvent be) {
                        El elem = be.getComponent().el().findParent(".x-form-element", 3);
                        elem.appendChild(XDOM.create("<div class='hint'>" + be.getComponent().getData(constants.hint())
                                + "</div>"));
                    }
                });
            }
        };

        idField = new NumberField();
        idField.setPropertyEditorType(Long.class);
        idField.setAllowDecimals(false);
        idField.setName("id");
        idField.setFieldLabel(messages.id());
        idField.setEnabled(false);
        idField.addPlugin(plugin);
        idField.setData(constants.hint(), messages.idHint());
        formPanel.add(idField, formData);

        nameField = new TextField<String>();
        nameField.setName("name");
        nameField.setFieldLabel(messages.name());
        nameField.setAllowBlank(false);
        nameField.setRegex(constants.nameRegex());
        nameField.getMessages().setRegexText(messages.nameHint());
        nameField.addPlugin(plugin);
        nameField.setData(constants.hint(), messages.nameHint());
        nameField.setMessageTarget("tooltip");
        formPanel.add(nameField, formData);

        titleField = new TextField<String>();
        titleField.setName("title");
        titleField.setFieldLabel(messages.title());
        titleField.setAllowBlank(false);
        titleField.setMinLength(constants.minTitleLength());
        titleField.setMaxLength(constants.maxTitleLength());
        titleField.addPlugin(plugin);
        titleField.setData(constants.hint(), messages.titleHint());
        titleField.setMessageTarget("tooltip");
        formPanel.add(titleField, formData);

        urlField = new TextField<String>();
        urlField.setName("url");
        urlField.setFieldLabel(messages.url());
        urlField.setMaxLength(constants.maxStringLength());
        urlField.addPlugin(plugin);
        urlField.setData(constants.hint(), messages.urlHint());
        formPanel.add(urlField, formData);
        
        rankField = new NumberField();
        rankField.setPropertyEditorType(Integer.class);
        rankField.setAllowDecimals(false);
        rankField.setName("rank");
        rankField.setFieldLabel(messages.rank());
        rankField.addPlugin(plugin);
        rankField.setData(constants.hint(), messages.rankHint());
        formPanel.add(rankField, formData);
        
        keywordsField = new TextField<String>();
        keywordsField.setName("keywords");
        keywordsField.setFieldLabel(messages.keywords());
        keywordsField.setMaxLength(constants.maxStringLength());
        keywordsField.addPlugin(plugin);
        keywordsField.setData(constants.hint(), messages.keywordsHint());
        formPanel.add(keywordsField, formData);
        

        descriptionField = new TextArea();
        //descriptionField.setPreventScrollbars(true);
        descriptionField.setName("description");
        descriptionField.setFieldLabel(messages.description());
        descriptionField.setMaxLength(constants.maxStringLength());
        formPanel.add(descriptionField, formData);

        formBinding = new FormBinding(formPanel);
        formBinding.autoBind();

        submitButton = new Button(messages.submit());
        cancelButton = new Button(messages.cancel());
        formPanel.setButtonAlign(HorizontalAlignment.CENTER);
        formPanel.addButton(submitButton);
        formPanel.addButton(cancelButton);

        FormButtonBinding binding = new FormButtonBinding(formPanel);
        binding.addButton(submitButton);

        this.setBorders(false);
        this.setBodyBorder(false);
        this.setHeaderVisible(false);
        this.setLayout(new FitLayout());

        add(formPanel);

    }

    @Override
    public Widget asWidget() {
        return this;
    }

    @Override
    public FormPanel getFormPanel() {

        return formPanel;
    }

    @Override
    public Button getCancelButton() {
        return cancelButton;
    }

    @Override
    public Button getSubmitButton() {
        return submitButton;
    }

    @Override
    public FormBinding getFormBinding() {
        return formBinding;
    }

    @Override
    public TextField<String> getNameField() {
        return nameField;
    }

}
